<template>
  <div>
    <h1>v-else和v-else-if</h1>
    <!-- 
      v-if  
      v-else 另一种情况

       v-else不能单独使用，必须配合v-if使用  v-else必须紧跟在v-if后面
     -->
    <div v-if="isLogin">
      <p>欢迎你</p>
      <p>尊贵的v10用户</p>
      <p><button @click="isLogin = false">退出</button></p>
    </div>
    <div v-else>
      <p>你好请先<button @click="isLogin = true">登录</button></p>
      <p><a href="/register">免费注册</a></p>
    </div>


    <div v-if="age <= 12">可以在家看奥特曼</div>
    <div v-else-if="age <= 18">可以在家打王者荣耀</div>
    <div v-else>可以去酒吧嗨皮</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      isLogin: true,
      age: 18
    }
  }
}
</script>

<style>

</style>